<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>inclusive-sort demo</title>

    <style>
      body {
        font-family: sans-serif;
        font-size: 120%;
        font-weight: bold;
      }

      * {
        box-sizing: border-box;
      }

      ul {
        margin: 0 10px 0 0;
        padding: 0;
        border: 1px solid;
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 33%;
        max-height: 200px;
      }

      li {
        border: 1px solid;
        background: white;
        margin: 5px;
        list-style: none;
        padding: 10px;
      }

      li.is-active {
        opacity: 0;
      }

      @media (prefers-reduced-motion: no-preference) {
        li {
          transition: transform .3s;
        }
      }
    </style>
  </head>
  <body>

  <div style="display: flex; align-items: flex-start">
    <ul>
      <li data-id="a">
        <button>Handle</button> Item A
      </li>
      <li data-id="b">
        <button>Handle</button> Item B<br>
        asdf<br>
        asdf
      </li>
      <li data-id="c">
        <button>Handle</button> Item C
      </li>
      <li data-id="d">
        <button>Handle</button> Item D
      </li>
      <li data-id="e">
        <button>Handle</button> Item E
      </li>
      <li data-id="f">
        <button>Handle</button> Item F
      </li>
    </ul>

    <ul>
      <li data-id="g">
        <button>Handle</button> Item G<br>
        asdf<br>
        asdf
      </li>
      <li data-id="h">
        <button>Handle</button> Item H
      </li>
      <li data-id="i">
        <button>Handle</button> Item I
      </li>
      <li data-id="j">
        <button>Handle</button> Item J
      </li>
      <li data-id="k">
        <button>Handle</button> Item K
      </li>
      <li data-id="l">
        <button>Handle</button> Item L
      </li>
    </ul>

    <ul>
      <li data-id="g">
        <button>Handle</button> Item G<br>
        asdf<br>
        asdf
      </li>
      <li data-id="h">
        <button>Handle</button> Item H
      </li>
      <li data-id="i">
        <button>Handle</button> Item I
      </li>
      <li data-id="j">
        <button>Handle</button> Item J
      </li>
      <li data-id="k">
        <button>Handle</button> Item K
      </li>
      <li data-id="l">
        <button>Handle</button> Item L
      </li>
    </ul>

    <ul>
      <li data-id="g">
        <button>Handle</button> Item G<br>
        asdf<br>
        asdf
      </li>
      <li data-id="h">
        <button>Handle</button> Item H
      </li>
      <li data-id="i">
        <button>Handle</button> Item I
      </li>
      <li data-id="j">
        <button>Handle</button> Item J
      </li>
      <li data-id="k">
        <button>Handle</button> Item K
      </li>
      <li data-id="l">
        <button>Handle</button> Item L
      </li>
    </ul>

    <ul style="min-height: 100px; border: 1px dashed">

    </ul>
  </div>

    <script type="module">
      // import { Sortable, verticalListSorting } from './src/index.ts';
      import { Sortable, verticalListSorting } from 'https://unpkg.com/inclusive-sort?module';

      const instance = new Sortable({
        containers: document.querySelectorAll('ul'),
        activator: item => item.querySelector('button'),
        strategy: verticalListSorting,
      });

      instance.addEventListener('dragstart', (e) => {
        e.detail.activeItem.classList.add('is-active');
      });

      instance.addEventListener('dragend', (e) => {
        e.detail.activeItem.classList.remove('is-active');
      });
    </script>
  </body>
</html>
